import { AtAccordion, AtButton, AtCard, AtIcon, AtList, AtListItem, AtNavBar, AtTimeline } from 'taro-ui';
import React from 'react';
import Taro from '@tarojs/taro';
import config from '../../config.json';
import { View } from "@tarojs/components";
import { formatDate } from "../../modal/modal";
import "./roomInfo.less";
import { XScrollPicker } from '../../modal/component';
import Calendar from '../../calendar/timer'



interface roomInfoType {
    mid: number,
    name: string,
    area: string,
    projector: number,
    wifi: number,
    note: string,
    time: {
        start_time: number,
        end_time: number,
    }[],
}
class roomInfo extends React.Component<any, any>{
    constructor(props) {
        super(props);
        this.state = {

            open: true,
            data: [{}],
            info: {
                mid: 0,
                name: '',
                area: '',
                projector: 0,
                wifi: 0,
                note: '',
                time: [{
                    start_time: 0,
                    end_time: 0,
                }],
            },
            array: [],
            times: {},
            timesArr: [],
            timeSelector: 0,
        };

    }
    click() {
        this.state.open ? this.setState({ open: false }) : this.setState({ open: true })
    }

    skip() {
        let url = "/pages/applyRoom/applyRoom?id=" + this.state.info.mid;
        Taro.navigateTo({
            url: url,
        })
    }

    async loadTimes(id: string) {
        let res = await Taro.request({
            url: config.domainName + "/meetroom/query-times",
            method: "GET",
            data: { mid: id },
            header: {
                token: Taro.getStorageSync('token'),
            }
        });
        let data = res.data.data;
        let arr = [];
        for (let key in data) {
            arr.push(key);
        }
        arr.sort()
        this.setState({
            times: data,
            timesArr: arr
        });
    }

    componentDidMount() {
        Taro.showLoading({
            title: '加载中',
        });
        setTimeout(function () {
            Taro.hideLoading()
        }, 500)
        let _this = this;
        let id = Taro.getCurrentInstance().router.params.id;
        
        this.loadTimes(id);
        Taro.request({
            url: config.domainName + '/meetroom/query',
            method: 'GET',
            data: {
                search: '',
                id: id,
            },
            header: {
                token: Taro.getStorageSync('token'),
            },
            success(res) {
                if (res.data.code === 0) {
                    _this.setState({
                        info: res.data.data[0],
                    });
                    // let tempArr = [];
                    // _this.state.info.time.map((item) => {
                    //     let start = new Date(item.start_time).toLocaleDateString().replace(/\//g, "-") + " " + new Date(item.start_time).toTimeString().substr(0, 8);
                    //     let end = new Date(item.end_time).toLocaleDateString().replace(/\//g, "-") + " " + new Date(item.end_time).toTimeString().substr(0, 8);
                    //     let nowTime = new Date().getTime();

                    //     if (item.start_time > nowTime) {
                    //         tempArr.push({
                    //             title: "始:" + start,
                    //             icon: 'clock'
                    //         });
                    //     }
                    //     if (item.end_time > nowTime) {
                    //         tempArr.push({
                    //             title: "终:" + end,
                    //             icon: 'clock'
                    //         });
                    //     }
                    //     // tempArr.push({
                    //     //     start:start,
                    //     //     end:end,
                    //     // })
                    //     console.log(tempArr);
                    //     _this.setState({
                    //         data: tempArr,
                    //     })
                    // })
                    // console.log(tempArr);
                    // console.log("获取成功!");
                    // console.log(res.data.data[0]);
                    // console.log(_this.state.info);
                } else if (res.data.code === 2) {
                    Taro.showToast({
                        title: "事件冲突",
                        icon: "error" as any
                    })
                } else {
                    Taro.showToast({
                        title: "服务器异常",
                        icon: "error" as any
                    })
                }

            },
            fail() {
                console.log("获取失败!");
            }
        })
    }
    render() {
        return (
            <>
                <AtNavBar
                    onClickLeftIcon={() => { Taro.navigateBack() }}
                    color='#000'
                    title='会议室信息'
                    leftIconType="chevron-left"
                />
                <View style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginRight: 20 }}>
                    <View className="module-title">会议室信息</View>
                </View>
                <AtCard
                    note={this.state.info.note}
                    title={this.state.info.name}
                    isFull={true}
                >
                    <View style={{
                        display: "flex",
                        justifyContent: "space-between"
                    }}>
                        <View>面积：{this.state.info.area}</View>
                        <View style={{ display: "flex", alignItems: "center" }}>
                            <View style={{ marginRight: "5px" }}>投影仪</View>
                            {this.state.info.projector ? <AtIcon value='check-circle' size='15' color='green'></AtIcon> : <AtIcon value='close-circle' size='15' color='#F00'></AtIcon>}
                        </View>
                        <View style={{ display: "flex", alignItems: "center" }}>
                            <View style={{ marginRight: "5px" }}>网络</View>
                            {this.state.info.projector ? <AtIcon value='check-circle' size='15' color='green'></AtIcon> : <AtIcon value='close-circle' size='15' color='#F00'></AtIcon>}
                        </View>
                    </View>
                </AtCard>
                {/* <AtList>
                    <AtListItem
                        title={"教室名称：" + this.state.info.name}
                    />
                    <AtListItem
                        title={"面积：" + this.state.info.area}
                    />
                    <AtListItem
                        title={"投影仪：" + (() => { if (this.state.info.projector) { return "可用" } else { return "不可用" } })()}
                    />
                    <AtListItem
                        title={"网络：" + (() => { if (this.state.info.wifi) { return "可用" } else { return "不可用" } })()}
                    />
                    <AtListItem
                        title={"备注：" + this.state.info.note}
                    />
                </AtList> */}
                <View style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginRight: 20 }}>
                    <View className="module-title">已占用时间</View>
                </View>
                {this.state.timesArr.length ? <XScrollPicker data={this.state.timesArr} value={this.state.timeSelector} width={4} onChange={(v) => { this.setState({ timeSelector: v }) }} /> : <View style={{ textAlign: "center", padding: "20px 0", color: "#999" }}>空</View>}

                <AtList>
                    {this.state.timesArr.length ? this.state.times[this.state.timesArr[this.state.timeSelector]].map((item: any) => {
                        return (<AtListItem title={formatDate(new Date(item.start_time), "HH:mm") + "~" + formatDate(new Date(item.end_time), "HH:mm")}></AtListItem>)
                    }) : ""}
                </AtList>

                <Calendar id={Taro.getCurrentInstance().router.params.id}/>


                <View style={{ margin: "10px 0px" }}>
                    <AtButton className="submit-btn" type="primary" onClick={this.skip.bind(this)}>预定</AtButton>
                </View>

            </>
        )
    }
}
export default roomInfo;

type DateDayProps = {
    date: Date
}

class DateDay extends React.Component<DateDayProps, any> {
    constructor(props: DateDayProps | Readonly<DateDayProps>) {
        super(props);
    }

    render() {
        return (
            <View className="date-day">
                {formatDate(this.props.date, "yyyy年MM月dd日")}
            </View>
        )
    }
}

class DateTime extends React.Component<any, any> {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View>

            </View>
        )
    }
}